<template>
	<view class="login-container">
		<view class="login-header">
			<view class="header-title"></view>
		</view>
		<view class="login-content">
			<!-- 登录表单 -->
			<uni-forms class="login-form" ref="ruleForm" :value="loginForm" :rules="rules" label-position="top">
				<uni-forms-item name="username" label="账号">
					<uni-easyinput :placeholderStyle="placeholderStyle" placeholder="请输入账号" v-model="loginForm.username" :inputBorder="false" />
				</uni-forms-item>
				<uni-forms-item name="password" label="密码">
					<uni-easyinput type="password" :placeholderStyle="placeholderStyle" placeholder="请输入密码" v-model="loginForm.password" :inputBorder="false" />
				</uni-forms-item>
				<!-- 验证码 -->
				<uni-forms-item name="code" label="验证码">
					<uni-easyinput :placeholderStyle="placeholderStyle" placeholder="请输入验证码" v-model="loginForm.code" :inputBorder="false">
						<template #right>
							<view class="code-box">
								<image class="code-img" :src="codeUrl" mode="heightFix" @click="getCode"></image>
							</view>
						</template>
					</uni-easyinput>
				</uni-forms-item>
			</uni-forms>
			<button class="login-btn" :loading="loginLoading" @click="toLogin">立即登录</button>
		</view>
	</view>
</template>

<script setup>
	import { reactive, toRefs,onMounted,ref } from 'vue';
	import {getCodeImg,login} from "@/service/login.js"
	
	const placeholderStyle = "font-size: 30rpx;color: #A5AFB7;"
	const ruleForm = ref(null)
	const state = reactive({
		loginForm:{},
		rules: {
			username: {
				rules: [
					{
						required: true,
						errorMessage: '请输入账号'
					}
				]
			},
			password: {
				rules: [
					{
						required: true,
						errorMessage: '请输入密码'
					}
				]
			},
			code: {
				rules: [
					{
						required: true,
						errorMessage: '请输入验证码'
					}
				]
			}
		},
		codeUrl:'',
		loginLoading:false
	})
	const {loginForm, rules, codeUrl, loginLoading} = toRefs(state)
	
	onMounted(() => {
		getCode()
	})
	
	//获取验证码
	const getCode = () => {
		getCodeImg().then((res) => {
		  let captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
		  if (captchaEnabled) {
		    state.codeUrl = 'data:image/gif;base64,' + res.img
		    state.loginForm.uuid = res.uuid
		  }
		})
	}
	
	//登录
	const toLogin = () => {
		ruleForm.value.validate().then((res) => {
			state.loading = true;
			login(state.loginForm).then(res => {
				uni.setStorageSync('mutations_token',res.token)
				state.loading = false
				uni.switchTab({
					url:'/pages/index/index'
				})
				// uni.navigateBack()
			})
		})
	}
</script>

<style lang="scss" scoped>
.login-container{
	width: 100%;
	height: 100vh;
	.login-header{
		width: 100%;
		height: 279rpx;
		background-image: url("../../static/images/login/login_header.png");
		background-size: 100% 100%;
		position: relative;
		.header-title{
			width: 357rpx;
			height: 106rpx;
			background-image: url("/static/images/login/login_title.png");
			background-size: 100% 100%;
			position: absolute;
			left: 322rpx;
			top: 140rpx;
		}
	}
	.login-content{
		box-sizing: border-box;
		width: 100%;
		height: calc(100% - 292rpx);
		padding: 79rpx 94rpx 0;
		background-color: #fff;
		.login-form{
			.uni-forms-item{
				:deep(.uni-forms-item__label){
					height: 30rpx;
					font-size: 23rpx;
					color: #8C95A1;
					line-height: 30rpx;
					padding-bottom: 16rpx;
				}
				:deep(input){
					font-size: 30rpx;
				}
				.uni-easyinput{
					font-size: 30rpx;
					color: #282D3F;
					:deep(.uni-easyinput__content){
						background-color: #F2F4F9 !important;
					}
					:deep(.uni-easyinput__content-input){
						height: 68rpx;
					}
				}
			}
			.code-box{
				height: 68rpx;
				padding-left: 11rpx;
				background-color: #fff;
				.code-img{
					height: 100%;
				}
			}
		}
		.login-btn{
			width: 100%;
			height: 82rpx;
			background: #295BF5;
			box-shadow: 0rpx 8rpx 15rpx 0rpx rgba(62,143,253,0.45);
			border-radius: 15rpx;
			font-size: 30rpx;
			color: #FFFFFF;
			/* font-weight: bold; */
			letter-spacing: 2rpx;
			line-height: 80rpx;
			margin-top: 100rpx;
		}
	}
}
</style>
